<template>
    <div class="add-card">
        <v-navbar></v-navbar>
        <div class="add-wrapper add-content">
            <icon-title :iconClass="userIcon" :text="userInfo"></icon-title>
            <div class="info">
                <div class="info-item">
                    <div class="wrapper">
                        <span class="text">商家名称</span>
                        <input type="text" maxlength="32" class="inp" v-model="shopName" placeholder="请输入商家名称">
                    </div>
                </div>
                <div class="info-item">
                    <div class="wrapper">
                        <span class="text">营业地址</span>
                        <input type="text" maxlength="255" class="inp" v-model="shopAddress" placeholder="请输入商家营业地址">
                    </div>
                </div>
                <div class="info-item">
                    <div class="wrapper">
                        <span class="text">联系电话</span>
                        <input type="text" maxlength="11" class="inp" v-model="shopTel" placeholder="请输入商家联系电话">
                    </div>
                </div>
                <div class="info-item">
                    <div class="wrapper border-none">
                        <span class="text">营业执照</span>
                    </div>
                </div>
                <div class="info-upload">
                    <img :src="add" width="67" height="67" alt="" @click="_callUpload">
                    <input type="file" id="file" class="file" accept="image/*" @change="_uploadImg"/>
                </div>
            </div>
            <div class="keep" @click="k_submit">
                <v-button :text="buttonText"></v-button>
            </div>
        </div>
    </div>
</template>

<script>
import add from '@imgs/apply/add.png'
import navbar from '@c/navbar/navbar'
import iconTitle from '@c/iconTitle/iconTitle'
import Button from '@c/button/button'
import {mapState, mapMutations} from 'vuex'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'
import { uploadOSS } from '@t/oss'
export default {
    name: 'Apply',
    data() {
        return {
            userIcon: 'shop', //小标题类名
            userInfo: '请提交商家信息', //小标题名
            buttonText: '提交',  //按钮名称
            shopName: '',//商家名称
            shopAddress: '', //营业地址
            shopTel: '',// 联系电话
            imgUrl: '',//
            add,//添加图标
            applyId: '',//数据id
        }
    },
    components: {
        'v-navbar': navbar,
        'icon-title': iconTitle,
        'v-button': Button
    },
    computed: {
        ...mapState(['wtitle', 'rback'])
    },
    methods: {
        ...mapMutations(['WTITLE', 'RBACK']),
        // 点击上传图片
        _callUpload() {
            this.$el.querySelector('.file').click()
        },
        // 异步请求oss
        async _uploadImg(event) {
            this.imgUrl = await uploadOSS(event)
			if (this.imgUrl) {
                this.add = this.imgUrl
			}
        },
        // 提交
        k_submit() {
            this.submitKeep()
        },
        // 提交验证
        submitKeep() {
            let keepData = {
                id: this.applyId,
                userId: window.localStorage.userId,
                businessName: this.shopName,
                businessAddress: this.shopAddress,
                phone: this.shopTel,
                businessLicense: this.imgUrl,
            }
            if (keepData.businessName === '') {
                this.$Message.warning('请输入商家名称')
                return
            }
            if (keepData.businessAddress === '') {
                this.$Message.warning('请输入商家地址')
                return
            }
            if (keepData.phone === '') {
                this.$Message.warning('请输入商家联系电话')
                return
            }

            if (keepData.businessLicense === '') {
                this.$Message.warning('请上传营业执照')
                return
            }
            this.doKeep(keepData)
        },
        // 执行提交
        doKeep(keepData) {
            this.$store.state.loadding = true
            jtpost(tokenLink.apply, keepData).then(re => {
                this.$store.state.loadding = false
                if (re.status == 0) {
					this.$Message.success('提交成功')
					this.$router.back(-1)
				} else {
					this.$Message.warning(re.msg)
				}
            })
        },
        // 查询用户是否注册
        _getUserRegister() {
            let userInfo = {
                userId: window.localStorage.userId
            }
            this.$store.state.loadding = true
            tokenPost(tokenLink.selectApply, userInfo).then(re => {
                this.$store.state.loadding = false
                if (re.status == 0) {
                    if (re.data.state === 0) {
                        this.$Message.warning('你现在正在审核中请勿重复提交！')
                        this.$router.back(-1)
                        return
                    }
                    if (re.data.state === -1) {
                        this.$Message.warning('你审核的信息未通过，请从新提交')
                    }
                    this.shopName = re.data.businessName
                    this.shopAddress = re.data.businessAddress
                    this.shopTel = re.data.phone
                    this.add = re.data.businessLicense
                    this.imgUrl = re.data.businessLicense
                    this.applyId = re.data.id
				} else {
					this.$Message.warning(re.msg)
				}
            })
        }
    },
    created() {
        this.WTITLE('申请成为商家')
        this.RBACK(true)
        this._getUserRegister()
    },
    watch: {
        'add'() {
            return this.add
        }
    }
}
</script>